<template>
    <div ref="refTop" class="noselect stretchy-nav">
        <a class="nav-trigger" href="#0" @click="onToggleVisible">
            <span aria-hidden="true"></span>
        </a>
        <ul v-show="bVisible" style="margin: 0px; display:flex; align-items:flex-end">
            <li view="graph">
                <div class="label">
                    <div class="label-text">硬件</div>
                </div>
                <svg viewBox="0 0 1254 1024" width="20" height="20">
                    <path
                        d="M715.294118 180.705882h128c15.058824 0 30.117647-12.54902 30.117647-30.117647 0-15.058824-12.54902-30.117647-30.117647-30.117647h-128c-15.058824 0-30.117647 12.54902-30.117647 30.117647s12.54902 30.117647 30.117647 30.117647zM1104.313725 0c-82.823529 0-150.588235 67.764706-150.588235 153.098039 0 82.823529 67.764706 153.098039 150.588235 153.098039s150.588235-67.764706 150.588236-153.098039C1254.901961 67.764706 1187.137255 0 1104.313725 0z m0 245.960784c-50.196078 0-92.862745-42.666667-92.862745-92.862745s40.156863-92.862745 92.862745-92.862745c50.196078 0 92.862745 42.666667 92.862746 92.862745S1154.509804 245.960784 1104.313725 245.960784z m-376.470588 240.941177h-188.235294c-7.529412 0-160.627451-22.588235-160.627451-163.137255 0-135.529412 140.54902-140.54902 155.607843-140.54902h47.686275c15.058824 0 27.607843-15.058824 27.607843-30.117647s-12.54902-27.607843-27.607843-30.117647h-47.686275c-72.784314 0-213.333333 42.666667-213.333333 200.784314 0 155.607843 138.039216 213.333333 213.333333 223.372549h188.235294c7.529412 0 160.627451 22.588235 160.627451 163.137255 0 135.529412-140.54902 140.54902-155.607843 140.549019H298.666667c-10.039216-75.294118-72.784314-130.509804-148.078432-130.509804-82.823529 0-150.588235 67.764706-150.588235 153.09804 0 82.823529 67.764706 150.588235 150.588235 150.588235 70.27451 0 130.509804-50.196078 145.568628-115.45098H727.843137c75.294118 0 213.333333-42.666667 213.333334-200.784314 0-155.607843-138.039216-213.333333-213.333334-220.862745zM150.588235 966.27451c-50.196078 0-92.862745-42.666667-92.862745-92.862745C57.72549 820.705882 100.392157 778.039216 150.588235 778.039216s92.862745 42.666667 92.862745 92.862745C240.941176 923.607843 200.784314 966.27451 150.588235 966.27451z"
                        fill="#ffffff" p-id="1033"></path>
                </svg>
            </li>
            <li view="ui">
                <div class="label">
                    <div class="label-text">UI</div>
                </div>
                <svg viewBox="0 0 1024 1024" width="20" height="20">
                    <path
                        d="M701.605 1007.048H461.791a180.026 180.026 0 0 1-159.546-96.454 93.481 93.481 0 0 1-10.9-17.507l-115.283-205.13a99.097 99.097 0 0 1 170.777-99.097V379.435a99.097 99.097 0 0 1 198.193 0v165.161h153.93A176.723 176.723 0 0 1 875.356 720.99v112.31a173.75 173.75 0 0 1-173.75 173.749zM264.258 610.661a33.032 33.032 0 0 0-29.729 47.566l115.283 205.461a38.317 38.317 0 0 0 5.615 8.588 33.032 33.032 0 0 1 4.294 6.277 114.292 114.292 0 0 0 102.07 62.43h239.814A107.685 107.685 0 0 0 809.29 833.299v-112.31a110.658 110.658 0 0 0-110.327-110.327H512a33.032 33.032 0 0 1-33.032-33.032V379.435a33.032 33.032 0 0 0-66.065 0v297.29a48.227 48.227 0 0 1-24.113 40.96 33.032 33.032 0 0 1-41.951-11.23l-49.879-73.332-2.643-4.625a33.032 33.032 0 0 0-30.059-17.837z"
                        p-id="1658" fill="#ffffff"></path>
                    <path
                        d="M918.452 130.145v232.258a116.129 116.129 0 0 1-116.13 116.129H599.098v-87.097a145.161 145.161 0 0 0-290.323 0v87.097h-14.516a65.323 65.323 0 0 0-10.742 0h-61.839a116.129 116.129 0 0 1-116.129-116.13V130.146a116.129 116.129 0 0 1 116.13-116.13h580.645a116.129 116.129 0 0 1 116.129 116.13z"
                        p-id="1659" fill="#ffffff"></path>
                </svg>
            </li>

            <li view="program">
                <div class="label">
                    <div class="label-text">编程</div>
                </div>
                <svg viewBox="0 0 1078 1024" width="20" height="20">
                    <path
                        d="M56.585751 538.911914H113.171502a53.891191 53.891191 0 0 1 39.879481 15.628445 50.118808 50.118808 0 0 1 16.70627 38.262746 53.891191 53.891191 0 0 0 56.585751 53.891191h113.171502a58.202487 58.202487 0 0 0 40.418393-15.628445 53.891191 53.891191 0 0 0 16.167358-38.262746 53.891191 53.891191 0 0 1 56.58575-53.891191h283.467667a57.124663 57.124663 0 0 0 39.879482-15.628446 53.891191 53.891191 0 0 0 16.706269-38.262746V323.347148a53.891191 53.891191 0 0 0-56.585751-53.891191H452.686007a53.891191 53.891191 0 0 0-56.58575 53.891191 53.891191 53.891191 0 0 1-16.167358 38.262746A58.202487 58.202487 0 0 1 339.514506 377.23834H226.343004a53.891191 53.891191 0 0 1-39.879482-15.628446 50.118808 50.118808 0 0 1-16.706269-38.262746 53.891191 53.891191 0 0 0-53.891192-53.891191h-53.891191a53.891191 53.891191 0 0 0-53.891191 53.891191v161.673574a53.891191 53.891191 0 0 0 48.502072 53.891192z m964.652325 107.782382H452.686007a53.891191 53.891191 0 0 0-56.58575 53.891192 53.891191 53.891191 0 0 1-16.167358 38.262746 58.202487 58.202487 0 0 1-40.418393 15.628445H226.343004a53.891191 53.891191 0 0 1-39.879482-15.628445 50.118808 50.118808 0 0 1-16.706269-38.262746 53.891191 53.891191 0 0 0-53.891192-53.891192h-53.891191a53.891191 53.891191 0 0 0-53.891191 53.891192v161.673574a53.891191 53.891191 0 0 0 56.585751 53.891191h48.502072a53.891191 53.891191 0 0 1 39.879481 15.628446 50.118808 50.118808 0 0 1 16.70627 38.262746 53.891191 53.891191 0 0 0 56.585751 53.891191h113.171502a58.202487 58.202487 0 0 0 40.418393-15.628445 53.891191 53.891191 0 0 0 16.167358-38.262746 53.891191 53.891191 0 0 1 56.58575-53.891192H1023.932636a53.891191 53.891191 0 0 0 39.879482-15.628445A50.118808 50.118808 0 0 0 1077.823827 862.259062v-161.673574a53.891191 53.891191 0 0 0-53.891191-53.891192zM808.367871 215.564765h53.891191v53.891192a53.891191 53.891191 0 0 0 107.782383 0V215.564765h53.891191a53.891191 53.891191 0 0 0 0-107.782382h-53.891191V53.891191a53.891191 53.891191 0 0 0-107.782383 0v53.891192h-53.891191a53.891191 53.891191 0 0 0 0 107.782382z"
                        p-id="1920" fill="#ffffff"></path>
                </svg>
            </li>

            <li action="edit">
                <div class="label">
                    <div class="label-text">属性</div>
                </div>
                <svg t="1650123695365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10189" width="20" height="20"><path d="M822.125714 572.562286a27.501714 27.501714 0 0 1 55.003429 0v201.581714A102.692571 102.692571 0 0 1 774.436571 877.714286H249.563429A102.692571 102.692571 0 0 1 146.285714 774.144V249.270857A102.4 102.4 0 0 1 249.270857 146.285714h227.035429a27.501714 27.501714 0 1 1 0 54.710857H249.270857a47.689143 47.689143 0 0 0-47.689143 48.274286v524.873143a47.981714 47.981714 0 0 0 47.981715 47.981714h524.873142a47.981714 47.981714 0 0 0 47.689143-47.981714z m0 0" p-id="10190" fill="#ffffff"></path><path d="M432.128 550.326857l-14.336 80.164572L497.371429 614.4l309.540571-309.833143-64.365714-64.658286-310.418286 310.418286z m-44.763429-32.475428l321.828572-321.828572a45.641143 45.641143 0 0 1 64.658286 0l77.531428 77.531429a45.933714 45.933714 0 0 1 0 64.365714l-321.828571 321.828571a29.257143 29.257143 0 0 1-14.043429 7.606858l-126.390857 24.576a26.624 26.624 0 0 1-24.283429-7.314286 29.257143 29.257143 0 0 1-7.899428-24.283429l23.405714-128.146285a26.331429 26.331429 0 0 1 7.606857-14.628572z m0 0" p-id="10191" fill="#ffffff"></path></svg>
            </li>

            <li action="save">
                <div class="label">
                    <div class="label-text">保存</div>
                </div>
                <svg t="1650123740643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13186" width="20" height="20"><path d="M928 896h-768a32 32 0 0 1-32-32v-192a32 32 0 0 1 64 0V832h704v-160a32 32 0 0 1 64 0v192a32 32 0 0 1-32 32z m-384-256a32 32 0 0 1-32-32v-448a32 32 0 0 1 64 0v448a32 32 0 0 1-32 32z m0 77.248L329.408 502.656a32 32 0 0 1 45.248-45.248L544 626.752l169.344-169.344a32 32 0 0 1 45.248 45.248z" p-id="13187" fill="#ffffff"></path></svg>
                
            </li>

            <li>
                <div class="label">
                    <div class="label-text">连接</div>
                </div>
                <n-popover trigger="click">
                    <template #trigger>
                        <div style="height:48px">
                            <UsbPlug24Regular v-show="connectionType=='serial'" :color="connectionColor" width="20" height="20" />
                            <Wifi v-show="connectionType=='ws'" :color="connectionColor" width="20" height="20" />
                        </div>
                    </template>
                    <ConnectionPanel class="connection-widget" ref="refPanel" style="width:350px;padding:20px;"></ConnectionPanel>
                </n-popover>
            </li>

            <li @click="bus.emit('terminal.popup()')">
                <div class="label">
                    <div class="label-text">终端</div>
                </div>
                <svg viewBox="0 0 1117 1024" width="20" height="20"><path d="M977.454545 837.818182h-372.363636v93.090909h232.727273a46.545455 46.545455 0 1 1 0 93.090909H279.272727a46.545455 46.545455 0 1 1 0-93.090909h232.727273v-93.090909H139.636364a139.636364 139.636364 0 0 1-139.636364-139.636364V186.181818a186.181818 186.181818 0 0 1 186.181818-186.181818h791.272727a139.636364 139.636364 0 0 1 139.636364 139.636364v558.545454a139.636364 139.636364 0 0 1-139.636364 139.636364zM362.775273 251.019636a44.218182 44.218182 0 0 0-63.813818-7.68L156.625455 360.820364a46.08 46.08 0 0 0-16.896 31.604363 415.325091 415.325091 0 0 0 0.884363 61.626182 46.08 46.08 0 0 0 18.152727 32.581818l142.522182 109.521455a43.845818 43.845818 0 0 0 60.509091-6.376727c-0.325818 0.418909-0.418909 0.977455-0.744727 1.396363l2.001454-2.420363c-0.372364 0.418909-0.884364 0.605091-1.256727 1.024a48.081455 48.081455 0 0 0-8.378182-67.304728L225.838545 424.401455l129.722182-107.054546a48.64 48.64 0 0 0 7.214546-66.327273z m296.075636-39.237818a46.545455 46.545455 0 0 0-63.115636 18.618182l-156.066909 286.021818a46.545455 46.545455 0 1 0 81.687272 44.590546l156.066909-286.021819a46.545455 46.545455 0 0 0-18.571636-63.208727zM977.454545 392.424727a46.08 46.08 0 0 0-16.896-31.604363l-142.336-117.480728a44.218182 44.218182 0 0 0-63.813818 7.68 48.546909 48.546909 0 0 0 7.400728 66.420364l129.722181 107.054545-127.581091 98.071273a48.081455 48.081455 0 0 0-8.378181 67.304727c-0.372364-0.418909-0.884364-0.605091-1.256728-1.024l2.001455 2.420364c-0.372364-0.418909-0.418909-0.977455-0.744727-1.396364a43.845818 43.845818 0 0 0 60.509091 6.376728l142.522181-109.521455a46.08 46.08 0 0 0 18.152728-32.581818A415.325091 415.325091 0 0 0 977.454545 392.424727z" p-id="1457" fill="#ffffff"></path></svg>
            </li>

            <n-popconfirm :show-icon="false" :style="{ width: '200px' }" positive-text="退出" negative-text="取消"
                    @positive-click="bus.emit('workspace.close()')">
                <template #trigger>
                    <li>
                        <div class="label">
                            <div class="label-text">退出</div>
                        </div>
                        <svg t="1650123227976" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4908" width="20" height="20"><path d="M918.4 489.6l-160-160c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l105.6 105.6L512 480c-19.2 0-32 12.8-32 32s12.8 32 32 32l307.2 0-105.6 105.6c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l160-163.2c0 0 0-3.2 3.2-3.2C931.2 518.4 931.2 499.2 918.4 489.6z" p-id="4909" fill="#ffffff"></path><path d="M832 736c-19.2 0-32 12.8-32 32l0 64c0 19.2-12.8 32-32 32L224 864c-19.2 0-32-12.8-32-32L192 192c0-19.2 12.8-32 32-32l544 0c19.2 0 32 12.8 32 32l0 64c0 19.2 12.8 32 32 32s32-12.8 32-32L864 192c0-54.4-41.6-96-96-96L224 96C169.6 96 128 137.6 128 192l0 640c0 54.4 41.6 96 96 96l544 0c54.4 0 96-41.6 96-96l0-64C864 748.8 851.2 736 832 736z" p-id="4910" fill="#ffffff"></path></svg>
                    </li>
                </template>
                <div>
                    <div>
                        <h3>正在退出模型工作台</h3>
                    </div>
                    所有未保存的工作都会丢弃，是否确定退出？
                </div>
            </n-popconfirm>

            <li></li>
        </ul>

        <span aria-hidden="true" class="stretchy-nav-bg"></span>

        <div class="active-ident"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, Ref, computed } from 'vue'
import { UsbPlug24Regular } from '@vicons/fluent'
import { Wifi } from '@vicons/ionicons5'
import ConnectionPanel from '../connection/ConnectionPanel.vue'
import { conn } from '@beshell/conn-ts/Connection';
import { bus } from '@beshell/events-ts/bus';

const refTop = ref(null) as unknown as Ref<HTMLElement>
const bVisible = ref(false)

const emit = defineEmits(["change-view", 'action'])

let $menu: any, $items: any, $active: any
let $labels: any

const connectionType = computed(()=> conn.active?.type || (runtime.serial?'serial':'ws') )
const connectionColor = ref("#808080")

onMounted(() => {
    
    conn.on("status", ()=>{
        connectionColor.value = conn.isConnected? 'green': '#606060'
    })
    connectionColor.value = conn.isConnected? 'green': '#606060'

    $menu = $(refTop.value)
    $items = $menu.find("ul li").each(function (i:number) {
        // @ts-ignore
        $(this).data("index", i)
    })
    $active = $menu.find(".active-ident")
    $labels = $menu.find(".label-text")
    console.log($labels)

    $items.mouseenter(function () {
        $labels.css("padding-top", 7)
        // @ts-ignore
        $(this)
            .find(".label-text")
            .animate({
                "padding-top": 1,
                // "opacity": 1,
            }, 50)
        // @ts-ignore
        // $(this)
        //     .find("svg")
        //     .animate({
        //         "opacity": 1,
        //     }, 100)
    })

    $items.mouseout(function () {
        // @ts-ignore
        $(this)
            .find(".label-text")
            // .css("padding-top", 7)
            .animate({
                "padding-top": 7,
                // "opacity": 0.6,
            }, 50)
        // @ts-ignore
        // $(this)
        //     .find("svg")
        //     .animate({
        //         "opacity": 0.85,
        //     }, 100)
    })

    $items.click(function () {
        // @ts-ignore
        let viewname = $(this).attr("view"), idx = $(this).data("index"), action = $(this).attr("action")
        if (viewname) {
            $active.animate({
                left: idx * 48 + 16
            }, 100)
            emit("change-view", viewname, idx)
        }
        
        if (action) {
            emit("action", action)
        }
    })
})

function onToggleVisible() {

    if (!bVisible.value) {

        let t = $items.length
        $items.each(function(i:number) {
            setTimeout(() => $items.eq(i).animate({ opacity: 1 }, 150), (t-i)*25)
        })
        
        $active.show()
        
        $menu.addClass("nav-is-visible")
        bVisible.value = true
    }
    else {
        // $items.css("opacity", "0")
        close()
    }
}

function close() {
    $items.each(function(i:number) {
        setTimeout(() => $items.eq(i).animate({ opacity: 0 }, 30), i*15)
    })

    $active.hide()

    $menu.removeClass("nav-is-visible")
    setTimeout(()=>bVisible.value = false, $items.length*25+150 )
}

defineExpose({close})

</script>

<style scoped>
.stretchy-nav {
    position: fixed;
    z-index: 1000;
    bottom: 15px;
    right: 15px;
    min-width: 48px;
    min-height: 48px;
}

.stretchy-nav .stretchy-nav-bg {
    /* this is the stretching navigation background */
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    border-radius: 30px;
    background: #9acd91;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: width 0.2s, box-shadow 0.2s;
}

.stretchy-nav.nav-is-visible .stretchy-nav-bg {
    width: 100%;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.stretchy-nav ul li {
    width: 48px;
    height: 78px;
    margin-top: -30px;
    display: inline-block;
    opacity: 0;
}

.stretchy-nav ul li:hover {
    cursor: pointer;
}


.stretchy-nav ul li svg {
    margin: 16px;
    pointer-events: none;
}

.stretchy-nav.nav-is-visible ul li svg {
    margin: 16px;
    /* animation: fadeIn 0.15s backwards; */
    /* transition: opacity 0.15s; */
}

.label {
    height: 30px;
}

.label-text {
    width: 100%;
    text-align: center;
    color: #333;
    padding-top: 8px;
    pointer-events: none;
}


.nav-trigger {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    /* replace text with image */
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
}

.nav-trigger span,
.nav-trigger span::after,
.nav-trigger span::before {
    /* this is the hamburger icon */
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #ffffff;
}

.nav-trigger span {
    /* middle line of the hamburger icon */
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
    transition: background-color 0.2s;
}

.nav-trigger span::after,
.nav-trigger span::before {
    /* top and bottom lines of the hamburger icon */
    content: '';
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transition: transform 0.2s;
}

.nav-trigger span::before {
    transform: translateY(-6px);
}

.nav-trigger span::after {
    transform: translateY(6px);
}

.no-touch .nav-trigger:hover~.stretchy-nav-bg {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.nav-is-visible .nav-trigger span {
    background-color: transparent;
}

.nav-is-visible .nav-trigger span::before {
    transform: rotate(-45deg);
}

.nav-is-visible .nav-trigger span::after {
    transform: rotate(45deg);
}

.stretchy-nav ul {
    position: relative;
    z-index: 2;
    padding: 0px;
    /* visibility: hidden; */
    transition: visibility 0.3s;
    text-align: right;
    width: 432px;
    height: 48px;
}

.stretchy-nav ul a {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 calc(1em + 48px) 0 1em;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
    transition: color 0.2s;
}

.stretchy-nav ul a::after {
    /* navigation item icons */
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    right: 22px;
    top: 50%;
}

.active-ident {
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #0a9581;
    z-index: 2;
    bottom: 3px;
    left: 16px;
    display: none;
}
</style>